<template>
  <div class="device-control">
    <!-- Drawer抽屉 -->
    <Drawer
        :title="title"
        v-model="visible"
        width="680"
        draggable
        :mask-closable="type == '0'">
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <div class="drawer-header">
          <div style="margin-right: 16px">基本信息</div>
        </div>
        <Form label-colon>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="设备ID">
                {{ form.id }}
                <Tooltip trigger="hover" placement="right" content="设备已禁用">
                  <Icon
                      v-show="form.status == -1"
                      type="md-lock"
                      size="18"
                      style="margin-left: 10px; cursor: pointer"/>
                </Tooltip>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="设备地址">
                {{ form.address }}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="设备名称">
                {{ form.name }}
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="设备MAC地址">
                {{ form.mac }}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="商铺ID">
                {{ form.shopId }}
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="32">
              {{ form.description }}
            </Col>
          </Row>
        </Form>
      </div>
      <div :style="{maxHeight:maxHeight}" class="drawer-content"></div>
      <Card>
        <Tabs value="1">
          <TabPane label="整机控制" name="1">
            <Card>
              <Form
                  ref="form"
                  :model="form"
                  :label-width="90"
                  :rules="formValidate"
                  style="position: relative">
                <FormItem label="静音开关" prop="mute">
                  <i-switch size="large" v-model="message.all_machine_status.mute"
                            @on-change="handleSwitchMute">
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                  </i-switch>
                </FormItem>
                <FormItem label="语音播报" prop="voice">
                  <Row :gutter="32">
                    <Col span="12">
                      <dict dict="voice_type" v-model="form.type" style="width: 300px"/>
                    </Col>
                    <Col span="12">
                      <Button
                          type="primary"
                          :loading="submitLoading"
                          @click=""
                          style="width: 100px">发送
                      </Button>
                    </Col>
                  </Row>
                </FormItem>
                <Spin size="large" fix v-if="loading"></Spin>
              </Form>
            </Card>
          </TabPane>
          <TabPane label="洗涤仓" name="2">
            <Card>
              <Form
                  ref="form"
                  :model="form"
                  :label-width="90"
                  :rules="formValidate"
                  style="position: relative">
                <FormItem label="授权状态" prop="open">
                  <i-switch size="large" v-model="message.wash_store_status.authorize"
                            @on-change="handleSwitchWashAuth">
                    <span slot="open">授权</span>
                    <span slot="close">解除授权</span>
                  </i-switch>
                </FormItem>
                <FormItem label="洗涤仓开关" prop="mute">
                  <i-switch size="large" v-model="message.wash_store_status.washStoreStart"
                            @on-change="handleSwitchWashStart">
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                  </i-switch>
                </FormItem>
                <FormItem label="仓门开关" prop="mute">
                  <i-switch size="large" v-model="message.wash_store_status.lockDoor"
                            @on-change="handleSwitchWashOpenDoor">
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                  </i-switch>
                </FormItem>
                <FormItem label="程序设定" prop="voice">
                  <Row :gutter="32">
                    <Col span="12">
                      <dict dict="wash_program" v-model="form.type" style="width: 300px"/>
                      <Button
                          type="primary"
                          :loading="submitLoading"
                          @click="setProgram"
                          style="width: 100px">设定
                      </Button>
                    </Col>
                  </Row>
                </FormItem>
                <FormItem label="" prop="voice">
                  <Button
                      type="error"
                      :loading="submitLoading"
                      @click="handleStopWash"
                      style="width: 120px">强制终止,待机
                  </Button>
                </FormItem>
                <Spin size="large" fix v-if="loading"></Spin>
              </Form>
            </Card>
          </TabPane>
          <TabPane label="烘干仓①" name="3">
            <Card>
              <Form
                  ref="form"
                  :model="form"
                  :label-width="90"
                  :rules="formValidate"
                  style="position: relative">
                <FormItem label="授权状态" prop="open">
                  <i-switch size="large" v-model="message.drying_1_status.authorize">
                    <span slot="open">授权</span>
                    <span slot="close">解除授权</span>
                  </i-switch>
                </FormItem>
                <FormItem label="烘干仓开关" prop="mute">
                  <i-switch size="large" v-model="message.drying_1_status.dryStart">
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                  </i-switch>
                </FormItem>
                <FormItem label="程序设定" prop="voice">
                  <Row :gutter="32">
                    <Col span="12">
                      <dict dict="dry_program" v-model="form.type" style="width: 300px"/>
                    </Col>
                    <Col span="12">
                      <Button
                          type="primary"
                          :loading="submitLoading"
                          @click=""
                          style="width: 100px">设定
                      </Button>
                    </Col>
                  </Row>
                </FormItem>
                <FormItem label="" prop="voice">
                  <Button
                      type="error" long
                      :loading="submitLoading"
                      @click=""
                      style="width: 120px">强制终止,待机
                  </Button>
                </FormItem>
                <Spin size="large" fix v-if="loading"></Spin>
              </Form>
            </Card>
          </TabPane>
          <TabPane label="烘干仓②" name="4">
            <Card>
              <Form
                  ref="form"
                  :model="form"
                  :label-width="90"
                  :rules="formValidate"
                  style="position: relative">
                <FormItem label="授权状态" prop="open">
                  <i-switch size="large" v-model="message.drying_2_status.authorize">
                    <span slot="open">授权</span>
                    <span slot="close">解除授权</span>
                  </i-switch>
                </FormItem>
                <FormItem label="烘干仓开关" prop="mute">
                  <i-switch size="large" v-model="message.drying_2_status.dryStart">
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                  </i-switch>
                </FormItem>
                <FormItem label="程序设定" prop="voice">
                  <Row :gutter="32">
                    <Col span="12">
                      <dict dict="dry_program" v-model="form.type" style="width: 300px"/>
                    </Col>
                    <Col span="12">
                      <Button
                          type="primary"
                          :loading="submitLoading"
                          @click=""
                          style="width: 100px">设定
                      </Button>
                    </Col>
                  </Row>
                </FormItem>
                <FormItem label="" prop="voice">
                  <Button
                      type="error" long
                      :loading="submitLoading"
                      @click=""
                      style="width: 120px">强制终止,待机
                  </Button>
                </FormItem>
                <Spin size="large" fix v-if="loading"></Spin>
              </Form>
            </Card>
          </TabPane>
        </Tabs>
      </Card>
    </Drawer>
  </div>
</template>

<script>
import {ws} from "@/api/index";
import {setAuth, setDoor, setMute, setProgram, setStart, stop} from "@/api/things";
import editor from "@/views/my-components/mrdeer/editor";
import dict from "@/views/my-components/mrdeer/dict";
import SockJS from "sockjs-client";
import Stomp from "stompjs";


export default {
  name: "control-device",
  components: {editor, dict},
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      visible: this.value,
      title: "",
      submitLoading: false,
      maxHeight: 816,
      form: {},
      formValidate: {},
      messageList: [],
      message: {
        all_machine_status: {
          have: false,
          mute: false,
          wash: true
        },
        drying_1_program: "",
        drying_1_stage: "",
        drying_1_status: {
          authorize: false,
          dryStart: false
        },
        drying_1_time: 1,
        drying_2_program: "",
        drying_2_stage: "",
        drying_2_status: {
          authorize: false,
          dryStart: false
        },
        drying_2_time: 1,
        errorCode: {
          code: ""
        },
        wash_program: "",
        wash_stage: "",
        wash_store_status: {
          authorize: false,
          lockDoor: false,
          washStoreStart: false
        },
        wash_time: 1
      }
    };
  },
  methods: {
    init() {
      //获取当前设备的状态
    },
    connect() {
      let headers = {};
      this.client = Stomp.over(new SockJS(ws));
      this.client.connect(headers, this.onConnected, this.onFailed);
    },
    onConnected(frame) {
      console.log("设备状态,连接ws成功: " + frame);
      let queueSubscription = this.client.subscribe(
          "/user/" + this.form.address + "/queue/subscribe",
          this.responseCallback
      );
    },
    responseCallback(frame) {
      this.getData();
      let data = JSON.parse(frame.body);
      this.message = data;
    },
    getData() {

    },
    handleSwitchMute(status) {
      setMute(this.form.address, status).then((res) => {
        if (res.status == 200) {

        }
      })
    },
    handleSwitchWashAuth(status) {
      setAuth(this.form.address, status).then((res) => {
        if (res.status == 200) {

        }
      })
    },
    handleSwitchWashStart(status) {
      setStart(this.from.address, status).then((res) => {
        if (res.status == 200) {

        }
      })
    },
    handleSwitchWashOpenDoor(status) {
      setDoor(this.form.address, status).then((res) => {

      })
    },
    setProgram(type) {
      setProgram(this.form.address, type).then((res) => {

      })
    },
    handleStopWash() {
      stop(this.form.address).then((res) => {

      })
    },
    onFailed(frame) {
      console.log("设备状态,连接ws失败： " + JSON.stringify(frame));
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      this.title = "设备详情";
      this.maxHeight = "100%";
      // 回显数据
      let data = this.data;
      this.form = data;
      this.visible = value;
      this.connect();
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
@import "./controlDevice.less";
</style>

